<template>
  <el-card style="margin-bottom:20px;background: #f5f7fa">
    <div slot="header" class="clearfix">
      <svg-icon icon-class="peoples"/>
      <span style="padding-left: 5px">客户</span>
    </div>
    <div class="user-profile">
      <el-tree :data="users" :load="loadNode" :props="listProps" lazy style="background: #f5f7fa"
               @node-click="handleNodeClick"></el-tree>
    </div>
  </el-card>
</template>

<script>
import {childrenUsers} from "@/api/user";

export default {
  data() {
    return {
      listProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  props: {
    users: {type: Array, default: []},
  },
  created() {
    this.$nextTick(() => {
      this.getUserList()
    })
  },
  methods: {
    handleNodeClick(data) {
      this.$emit('handleNodeClick', data)
    },
    getUserList() {
      childrenUsers({}).then(res => {
        if (res.code == 20000) {
          this.users = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    loadNode(node, resolve) {
      childrenUsers({pid: node.data.id}).then(res => {
        if (res.code == 20000) {
          resolve(res.data)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
};
</script>

<style>
.el-tree-node.is-current > .el-tree-node__content {

  background-color: #409EFF !important;

}
</style>
